/* 自定义选择器 */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
@custom-selector :--enter :focus, :hover;

:root {
  --lightColor: #ddd;
  --drakColor: #333;
  --mainColor: #aabbcc;

  --center: {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

body {
  /* 使用颜色#aabbcc，不做任何处理，等同于直接书写 #aabbcc */
  color: color(var(--mainColor));
  /* 将颜色#aabbcc透明度设置为90% */
  color: color(var(--mainColor) a(90%));
  /* 将颜色var(--mainColor)的红色部分设置为90% */
  color: color(var(--mainColor) red(90%));
  /* 将颜色var(--mainColor)调亮50%（更加趋近于白色），类似于less中的lighten函数 */
  color: color(var(--mainColor) tint(50%));
  /* 将颜色var(--mainColor)调暗50%（更加趋近于黑色），类似于less中的darken函数 */
  color: color(var(--mainColor) shade(50%));
}

.item {
  @apply --center;
}

a:--enter {
  color: #f40;
}

:--heading {
  font-weight: bold;
}

:--heading.active {
  font-weight: bold;
}

.main {
  color: red;
  & a {
    color: var(--lightColor);
    background: var(--drakColor);
  }
}

::placeholder {
  color: red;
}
